<template>
<div>
  <!-- 面包屑导航 -->
  <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/system/user' }">系统管理</el-breadcrumb-item>
    <el-breadcrumb-item>权限管理</el-breadcrumb-item>
  </el-breadcrumb>
  <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAdd">添加父节点</el-button>
  <div class="custom-tree-container" style="width: 350px;padding-left: 50px;padding-top: 20px;">
    <el-form ref="formData" label-width="80px" >
      <el-tree
        :data="data"
        :props="defaultProps"
        node-key="permissionId"
        :expand-on-click-node="false" >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="text" size="mini" @click="openAdd(data)" v-if="data.parentId === 0">
                添加子节点
              </el-button>
              <el-button type="text" size="mini" @click="openEdit(node, data)">
                编辑
              </el-button>
            </span>
          </span>
      </el-tree>
    </el-form>
  </div>
  <!-- 添加父节点弹框 -->
  <div>
    <el-dialog title="添加父节点" :visible.sync="add.dialogFormVisible" width="350px" :before-close="handleClose">
      <el-form :model="parentForm" ref="form" style="width:300px;">
        <el-form-item label="父节点名称" label-width="80px;">
          <el-input v-model="parentForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父节点代码" label-width="80px;">
          <el-input v-model="parentForm.code" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubParent">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  <!-- 添加子节点弹框 -->
  <div>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="350px" :before-close="handleClose">
      <el-form :model="form" ref="form" style="width:300px;">
        <el-form-item label="子节点名称" label-width="80px;">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="子节点代码" label-width="80px;">
          <el-input v-model="form.code" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</div>
</template>

<script>
import permissionApi from "@/api/permission";
export default {
  data() {
    return {
      data: [],
      defaultProps: {// 默认设置
        children: 'children',
        label: 'name'
      },
      parentForm: {
        name: '',
        code: ''
      },
      form: {
        name: '',
        code: ''
      },
      dialogFormVisible: false,
      title: '',
      addPermissionId: '',
      add: {
        dialogFormVisible: false
      }
    }
  },

  created() {
    this.fetchData();
  },

  methods: {
    // 查询树形权限列表信息
    fetchData() {
      permissionApi.getAllPermission().then(response => {
        if (response.code === 200) {
          this.data = response.data
        }
      })
    },

    // 提交新增父节点
    handleSubParent() {
      const data = {
        parentId: 0,
        name: this.parentForm.name,
        code: this.parentForm.code
      }
      permissionApi.savePermission(data).then(response => {
        if (response.code === 200) {
          this.$notify({
            title: '成功',
            message: '添加子节点成功',
            type: 'success',
            duration: 1500
          });
        } else if (response.code === 306) {
          this.$notify.error({
            title: '错误',
            message: '您没有操作权限，请联系管理员',
            duration: 1500
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '系统异常，请稍后再试',
            duration: 1500
          });
        }
        this.handleClose();
        this.fetchData();
      })
    },

    // 添加父节点
    handleAdd() {
      this.add.dialogFormVisible = true;
    },

    // 关闭弹框
    handleClose() {
      // 将表单清空
      this.form.name = '';
      this.form.code = '';
      this.dialogFormVisible = false;
      this.add.dialogFormVisible = false;
      this.parentForm.name = '';
      this.parentForm.code = '';
    },

    // 打开新增弹框
    openAdd(_data) {
        this.addPermissionId = _data.permissionId;
        this.title = '添加子节点';
        this.dialogFormVisible = true;
    },

    // 编辑或者新增节点
    handleEdit() {
      if (this.title === '编辑子节点') {
        permissionApi.update(this.form).then(response => {
          if (response.code === 200) {
            this.$notify({
              title: '成功',
              message: '编辑成功',
              type: 'success',
              duration: 1500
            });
          } else if (response.code === 306) {
            this.$notify.error({
              title: '错误',
              message: '您没有操作权限，请联系管理员',
              duration: 1500
            });
          } else {
            this.$notify.error({
              title: '错误',
              message: '系统异常，请稍后再试',
              duration: 1500
            });
          }
          this.handleClose();
          this.fetchData();
        })
      } else {
        const data = {
          parentId: this.addPermissionId,
          name: this.form.name,
          code: this.form.code
        }
        permissionApi.savePermission(data).then(response => {
          if (response.code === 200) {
            this.$notify({
              title: '成功',
              message: '添加子节点成功',
              type: 'success',
              duration: 1500
            });
          } else if (response.code === 306) {
            this.$notify.error({
              title: '错误',
              message: '您没有操作权限，请联系管理员',
              duration: 1500
            });
          } else {
            this.$notify.error({
              title: '错误',
              message: '系统异常，请稍后再试',
              duration: 1500
            });
          }
          this.handleClose();
          this.fetchData();
        })
      }
    },

    // 打开编辑弹框
    openEdit(_node, _data) {
      permissionApi.getInfoByPermissionId(_data.permissionId).then(response => {
        if (response.code === 200) {
          this.form = response.data;
          this.title = '编辑子节点';
          this.dialogFormVisible = true;
        }
      })
    },

    // 删除节点
    handleDelete(_node, _data) {
      this.$confirm('确认删除该节点吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送删除请求
        permissionApi.delete(_data.permissionId).then(response => {
          if (response.code === 200) {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 1500
            });
            this.fetchData();
          } else {
            this.$notify.error({
              title: '错误',
              message: '删除失败',
              duration: 1500
            });
            this.fetchData();
          }
        })
      }).catch(() => {
        // 取消删除
      });
    },



  }
};
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
